import { Link } from '@brillout/docpress'
import { UiFrameworkExtension, ImplementedBy } from '../../components'

Environment: client, and server if <Link href="/ssr">`ssr: true`</Link>.
<ImplementedBy by={<code>vike-react</code>}>the `Wrapper` setting</ImplementedBy>

The component defined by the  `Wrapper` setting wraps the <Link href="/Page">`<Page>` component</Link>.

```jsx
<Wrapper>     ⟸ component defined by the setting "Wrapper"
  <Layout>    ⟸ component defined by the setting "Layout"
    <Page />  ⟸ component defined by the setting "Page"
  </Layout>
</Wrapper>
```

A page can be wrapped by multiple `<Wrapper>` components:

```jsx
<Wrapper1>
  <Wrapper2>
    <Wrapper3>
      <Layout>
        <Page />
      </Layout>
    </Wrapper3>
  </Wrapper2>
</Wrapper1>
```

The `<Wrapper>` component is usually used for integrating tools, such as data fetching and state management tools.

> Both `<Wrapper>` and <Link href="/Layout">`<Layout>`</Link> have the exact same effect of wrapping `<Page>`. For a clean organization and for ensuring that tool wrappers also wrap `<Layout>`, we recommend using `<Wrapper>` for integrating tools while using `<Layout>` for defining the visual appearance of your pages.


## Without `vike-{react,vue,solid}`

In case you don't use a <UiFrameworkExtension />, you can implement the `Wrapper` setting yourself by using <Link href="/meta">meta</Link>.

Example:

 - [`vike-react` source code](https://github.com/vikejs/vike-react/blob/main/packages/vike-react)


## See also

- <Link href="/Layout" />
- <Link href="/Page" />
